<template>
           <div class="box">
                 <header class="hd">
                     <i class="iconfont icon-weibiaoti-- fh" @click="back" ></i>
                     <span class="title">身份认证</span>
                </header>
                 <h1 style="width:100%;height:1.88rem;"></h1> 
                <!-- <h2 class="iconfont icon-renzhengdunpaianquanbaozhangzhibao-xianxing">
                    &nbsp;<span class="ts">银行级别数据加密保护</span>
                </h2> -->
                <div class="fixed-con-lg">
            <group>     
                <x-input title="姓名" :disabled="status" v-model="username" :required="true" placeholder="请输入您的真实姓名" type="text"></x-input>
                <x-input title="身份证号" :disabled="status" v-model="userid" :required="true" placeholder="请输入您的身份证号码" type="text"></x-input>
            </group> 
            <box gap="0 10px">
                <!-- <div>{{system=='Iphone'?'zm_upload':'androidImg_z'}}</div> -->
                <div class="camera-box" :class="system=='Iphone'?'zm_upload':'androidImg_z'" :style="{background: '#b1d8fb url('+ require('../assets/img/id2.png') +') center center no-repeat',backgroundSize: '177px 97.5px'}" >
                    <img v-if="zm_path" :src="baseURL+'uploads/'+zm_path" class="img-zm">
                    <img :src="require('../assets/img/camera.png')" class="psa" >
                    <div class="psa">上传身份证正面</div>
                </div>
                <div class="camera-box" :class="system=='Iphone'?'fm_upload':'androidImg_f'" :style="{background: '#b1d8fb url('+ require('../assets/img/id1.png') +') center center no-repeat',backgroundSize: '177px 97.5px'}" >
                    <img v-if="fm_path" :src="baseURL+'uploads/'+fm_path" class="img-zm">
                    <img class="psa" :src="require('../assets/img/camera.png')">
                    <div class="psa">上传身份证反面</div>
                </div>
                <div class="camera-box" :class="system=='Iphone'?'sc_upload':'androidImg_sc'" :style="{background: '#b1d8fb url('+ require('../assets/img/id2.png') +') center center no-repeat',backgroundSize: '177px 97.5px'}" >
                    <img v-if="sc_path" :src="baseURL+'uploads/'+sc_path" class="img-zm">
                    <img class="psa" :src="require('../assets/img/camera.png')">
                    <div class="psa">手持身份证正面拍照</div>
                </div>
            </box>
            <box gap="10px 20px">
                <XButton type="primary" :disabled="status" @click.native="auth">{{r_status}}</XButton>
            </box>
            
        </div>
    </div>

</template>

<script>
import { Group,Box,XButton,XInput } from "vux";

export default {
    name: "authentication",
    data() {
        return {
            username:"",
            userid:"",
            zm_path:"",
            fm_path:"",
            sc_path:"",
            r_status:"认 证",
            status:false,
            uploadc:'',
            token:""
        }

    },
    components: {
      Group,Box,XButton,XInput
    },
    created() {

    },
    mounted() {   
//  	var tt = localStorage.getItem('Token')
//  	this.token = tt
//      console.log(this.token)
//    /* 初始化上传插件 */
         const _this = this;
         this.$http.post("/api/auth/get_idcard_auth?token="+this.token).then(res=>{
//       	            console.log(res)
//                     if(res.data.code == 200){
//                          this.username = res.data.name;
//                           this.userid = res.data.idcard;
//                            this.zm_path = res.data.idcard_img;
//                            this.fm_path = res.data.idcard_imgback;
//                            this.r_status = "认证成功"                              
//                                 this.status = true;         
//                                     Uploader(".zm_upload",{
//                                         path:this.baseURL+"/api/upload/upload",//请求的地址
//                                         data:{//往后台传递的参数
//                                             path:"idcard"
//                                         },
//                                         uploadSuccess:function(results){//上传成功的回调
//                                             if(results.code==100){
//                                                 _this.zm_path = results
//                                             console.log(_this.zm_path,1)
//                                             }else{
//                                                 mui.toast(results.msg)
//                                             }
//                                         },
//                                         uploadError:function(xhr,status){
//                                             console.log(status)
//                                             //上传出错的回调
//                                         }
//                                     });
//
//                                     Uploader(".fm_upload",{
//                                         path:this.baseURL+"/api/Upload/upload",//请求的地址
//                                         data:{//往后台传递的参数
//                                             path:"idcard"
//                                         },
//                                         uploadSuccess:function(results){//上传成功的回调
//                                             if(results.code==100){
//                                                 _this.fm_path = results.result
//                                             console.log(_this.fm_path,2)
//                                             }else{
//                                                 mui.toast(results.msg)
//                                             }
//                                         },
//                                         uploadError:function(xhr,status){
//                                             console.log(status)
//                                             //上传出错的回调
//                                         }
//                                   });
//                                  
                                       document.querySelector('.androidImg_z').addEventListener('touchstart',function (e) {
                                           _this.showActionSheet('zm_path')
                                       })
                                       document.querySelector('.androidImg_f').addEventListener('touchstart',function (e) {
                                           _this.showActionSheet('fm_path')
                                       })
                                       document.querySelector('.androidImg_sc').addEventListener('touchstart',function (e) {
                                           _this.showActionSheet('sc_path')
                                       })
                              
//                         }
                          // console.log(res)
                       });

		    },
		    methods: {
		        back(){
		            this.$router.go(-1)
		        },
		  auth(){        	
//          console.log(token)
            if(!this.useranme=='' || !(/^[\u4E00-\u9FA5]{2,4}$/.test(this.username))) return mui.toast("您输入的真实姓名有误");
            if(!this.userid || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(this.userid)) return mui.toast("您输入的身份证号码有误");
            if(!this.zm_path) mui.toast("请上传身份证正面照")
            if(!this.fm_path) mui.toast("请上传身份证反面照")
            if(!this.sc_path) mui.toast("请上传手持身份证正面照")
              this.token = localStorage.getItem('Token')
            let timer = null;
            clearInterval(timer);
            timer = setInterval(()=>{
                if(this.zm_path&&this.fm_path&&this.sc_path){
                    clearInterval(timer);                
//                  console.log(this.token)
                    this.status = true;
//                   console.log(this.username)
//                   console.log(this.userid)
//                   console.log(this.zm_path)
//                   console.log(this.fm_path)
                    var qs = require('qs')
                    this.$http.post("/api/auth/auth_idcard",qs.stringify({'token':this.token,'name':this.username,'idcard':this.userid,'idcard_img':this.zm_path,'idcard_imgback':this.fm_path,'img':this.sc_path}))
                        .then(res=>{
                        	if(res.data.code=="200"){
                        		mui.toast("上传成功")
                        			this.$router.go(-1)
                        		}else{
                        			mui.toast("上传失败，请稍后再试")
                        		}
                        	})
//                      mui.toast(res.data.msg);
//                      this.status = false;
//                      if(res.data.code == 1){
//                          this.$router.go(-1);
//                      }
                   };
                   
            },1000)
//                console.log('123')
      },
        showActionSheet(type) {  
            this.uploadc = type;
            let bts = [{    
                title: "拍照"    
            }, {    
                title: "从相册选择"    
            }];   
            mui.plusReady(()=>{
                plus.nativeUI.actionSheet(
                    {    
                        cancel: "取消",    
                        buttons: bts    
                    },(e) => {    
                        if (e.index == 1) {    
                            this.getImage();    
                        } else if (e.index == 2) {    
                            this.galleryImgs();    
                        }    
                    }    
                );  
            }) 
              
        },
        getImage() {    
            const _this = this;
            mui.plusReady(()=>{
                const cmr = plus.camera.getCamera();    
                cmr.captureImage((p) => {    
                    plus.io.resolveLocalFileSystemURL(p, (entry)=> {    
                        console.log('拍照地址为'+entry.toLocalURL())
                        let path = entry.toLocalURL(); 
                        //_this.nativeSrc = path;
                        this.compressImage(entry.toLocalURL(),entry.name);    
                    }, function(e) {    
                        plus.nativeUI.toast("读取拍照文件错误：" + e.message);    
                    });    
                }, function(e) {    
                }, {    
                    filename: "_doc/camera/",   
                    index: 1    
                });  
            })
        },
        galleryImgs() {   
            const _this = this;
            mui.plusReady(()=>{
                plus.gallery.pick((e) => {    
                    let name = e.substr(e.lastIndexOf('/') + 1);  
                    console.log('获取图片地址为'+e)
                    //_this.nativeSrc = e;
                    this.compressImage(e,name);  
                }, (e) => {    
                }, {    
                    filename: "_doc/camera/",   
                    filter: "image"    
                }); 
            }) 
               
        },
        compressImage(url,filename){    
           let name="_doc/upload/"+filename;  
           mui.plusReady(()=>{
                plus.zip.compressImage({    
                        src:url,//src: (String 类型 )压缩转换原始图片的路径    
                        dst:name,//压缩转换目标图片的路径    
                        quality:40,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100    
                        overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件    
                    },    
                    (zip) => {  
                        //页面显示图片  
                        this.showPics(zip.target,name);  
                    },(error) =>  {    
                        plus.nativeUI.toast("压缩图片失败，请稍候再试");  
                          
                });
           })   
        },
        showPics(url,name){          
         //根据路径读取到文件   
            const _this = this;
            mui.plusReady(()=>{
                plus.io.resolveLocalFileSystemURL(url,(entry) => {  
                    entry.file( (file) => {  
                        _this.uploadImg(file);
                    });  
                }); 
            })     
        },
        uploadImg(file){
            const _this = this;
            console.log(JSON.stringify(file))
            let task = plus.uploader.createUpload( _this.baseURL+"/api/upload/upload?system=android&path=idcard", 
                { method:"POST",blocksize:204800,priority:100 },
                 ( t, status ) => {
                    // 上传完成
                    if ( status == 200 ) {                         
                        let data = JSON.parse(t.responseText)
                        console.log(JSON.stringify(data),"9999999999999999999999999999")
                        _this[_this.uploadc] = data.data;
                        _this[_this.zm_path] = data.data;
                        _this[_this.fm_path] = data.data;
                        _this[_this.sc_path] = data.data;
                        mui.toast(data.msg)                        
                    } else {
                        console.log(JSON.stringify(t))
                        alert( "Upload failed: " + status );
                    }
                }
            );
            task.addFile( file.fullPath ,{key: 'file'});
            task.start();
        } 
    }
}
</script>
<style lang="less" scoped>
        header{
               position:fixed;
               top:0;
               width:100%;
               height:1.88rem;
               display:flex;
               position: fixed;
               top:0;
               z-index:100;
               background: #fff;
         }
         .fh{
             width:2.1rem;
             line-height:1.88rem;
             text-align:center;
             z-index:100; 
             color:#333333;
             font-size:0.76rem;  
         }
         .title{
               font-size:0.76rem;
               line-height:1.88rem;
               text-align:center;
               color:#333333;
               letter-spacing:0.02rem;
               position: absolute;
               left:0;
               right:0;
               margin:0 auto;
         }
</style>

<style scoped lang="css">
#authentication{width: 100%;height: 100%;background: #ffffff;}

.camera-box{position: relative;width: 100%;height: 150px;text-align: center;color: #fff;margin: 10px 0;}
.camera-box img{display: inline-block;width: 44px;margin-top: 30px;}
.psa{z-index:3;position:relative;}
.camera-box .img-zm{display:block;width:100%;height: 100%; position: absolute;margin-top: 0px;}
</style>
<style>
#authentication .upload-img-box,.upload-btn-box,.upload-addimg-btn:first-child input{position:absolute;left:0;top:0;width:100%;height:100%;}
#authentication .upload-img-box{z-index:1;}
#authentication .upload-btn-box{z-index:4;}
#authentication .upload-addimg-btn:first-child input{opacity:0;}
#authentication .upload-img-item,#authentication .upload-img-item img{height:100%;width: 100%; position: absolute; left:0px;top:0px;}
/* .upload-addimg-btn:last-child{display:none;} */
#authentication input{border: none;}
</style>




